
<template>
  <div class="body-content">
    <Row :gutter="8">
      <Col :span="8">
        <Menu style="width:100%;height:100%;" :active-name="currentMenu">
          <Submenu :name="'basic'">
            <template slot="title">
              <Icon type="ios-list" />
              {{lang.basic}}
            </template>
            <MenuItem v-for="(item,i) in data.basic" :key="i" :name="'basic'+i" @click.native="selectElement('basic',i)">{{`${i}:${item.title}`}}<Icon style="float: right;color:red" type="md-remove" @click.native="removeBasic(i)"></Icon></MenuItem>
            <MenuItem name="new" @click.native="newAddBasic">{{lang.newBasic}}</MenuItem>
          </Submenu>
          <Submenu :name="k" v-for="k in Object.keys(data)" :key="k" v-if="k!=='basic'&&k!=='equipment'">
            <template slot="title">
              <Icon type="ios-list" />
              {{k}}
            </template>
            <MenuItem v-for="(item,i) in data[k]" :key="i" :name="k+i" @click.native="selectElement(k,i)">{{`${i}:${item.title}`}}<Icon style="float: right;color:red" type="md-remove" @click.native="removeOther(k,i)"></Icon></MenuItem>
            <MenuItem name="new" @click.native="newAddOther(k)">{{lang.newOther}}</MenuItem>
          </Submenu>
          <MenuItem name="new">
            <cfg-field style="width:100%;" :labelStyle="{width:'80px'}" :label="lang.newDictionary" v-model="newDictionary" :config="{type:'text'}" :addField="true" @addField="addField"></cfg-field>
          </MenuItem>
        </Menu>
      </Col>
      <Col :span="16" style="padding:10px;">
        <div v-if="!!dictionary">
          <cfg-hier-dictionary :data="data[dictionary][elementIndex]"></cfg-hier-dictionary>
        </div>
      </Col>
    </Row>

  </div>
</template>

<script>
import CfgHierDictionary from "./cfg-hier-dictionary";
import cfgField from '../../../wizard/fields/cfg-field'
export default {
  name: "cfg-hier-logic-dictionary",
  components: {CfgHierDictionary,cfgField},
  data(){
    return {
      model:null,
      currentMenu:'',
      elementIndex:-1,
      newDictionary:'',
      dictionary:'',
    }
  },
  props: {
    data: {
      default: () => {
        return {};
      }
    },
    modelType:{
      default: () => {
        return 'twinsDictionary';
      }
    }
  },
  computed: {
    lang() {
      return {
        "en-US": {
          basic: 'basic',
          newBasic: 'new basic Item',
          equipment: 'equipment',
          newDictionary: 'new dictionary',
          newOther:'new item'
        },
        "zh-CN": {
          basic: '基础',
          newBasic: '新增基础条目',
          equipment: '设备',
          newDictionary: '新增字典',
          newOther:'新增条目'

        },
      }[this.G_Locale];
    },
    basicTpl(){
      return this.$modelObject.getHierTpl()['basic']
    },
    otherTpl(){
      return this.$modelObject.getHierTpl()['basic']
    }
  },
  methods:{
    selectElement(menu,pos){
      this.currentMenu=menu+pos;
      this.dictionary=menu;
      this.elementIndex=pos;
    },
    removeBasic(pos){
      this.data.basic.splice(pos,1);
      this.elementIndex=-1;
    },
    newAddBasic(){
      this.data.basic.push(this.$modelObject.getHierTpl()['basic']);
      this.selectElement('basic',this.data.basic.length-1);
    },
    removeOther(key,pos){
      this.data[key].splice(pos,1);
      this.elementIndex=-1;
    },
    newAddOther(key){
      this.data[key].push(this.$modelObject.getHierTpl()['basic']);
      this.selectElement(key,this.data[key].length-1);
    },
    addField(){
      if(!!this.newDictionary){
        this.$set(this.data,this.newDictionary,[])
      }
    }
  }
}
</script>

<style scoped>
.body-content {
  padding: 2px;
}
</style>